<template>
  <div class="recommend">
    <SlideShow></SlideShow>
    <div class="container">
      <ContainerLeft></ContainerLeft>
      <ContainerRight></ContainerRight>
    </div>
  </div>
</template>

<script>
import SlideShow from '@/components/SlideShow.vue'
import ContainerLeft from '@/components/ContainerLeft.vue'
import ContainerRight from '@/components/ContainerRight.vue'
export default {
  components: {
    SlideShow,
    ContainerLeft,
    ContainerRight
  }
}
</script>

<style scoped>
.recommend {
  background: #f5f5f5;
}
.container {
  display: flex;
  justify-content: space-between;
  width: 980px;
  min-height: 700px;
  margin: auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background: url(https://s2.music.126.net/style/web2/img/frame/wrap1.png?88c69c60798232d410d454f2bc0c83b1) repeat-y 100% 100%;
}
.Container-left {
  width: 729px;
  height: 1425px;
}
.Container-right {
  width: 250px;
  height: 1425px;
  background-color: seagreen;
}
</style>
